<template>
  <div class="login-box">
    <el-card class="box-card">
      <div class="clearfix">
        <span>
          <el-image
            style="width: 96px; height: 96px; border-radius: 50%"
            src="http://likede2-admin.itheima.net/img/logo.595745bd.png"
          ></el-image>
        </span>
      </div>
      <el-form :rules="rules" :model="form">
        <el-form-item class="item-box" prop="loginName">
          <el-input placeholder="请输入用户名" v-model="form.loginName">
            <template #prefix>
              <i class="el-icon-mobile-phone"></i>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            type="password"
            placeholder="请输入用户密码"
            v-model="form.password"
          >
            <template #prefix>
              <i class="el-icon-lock"></i>
            </template>
            <template #suffix>
              <i class="el-icon-view"></i>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="code">
          <el-input placeholder="请输入验证码" v-model="form.code">
            <template #prefix>
              <i class="el-icon-house"></i>
            </template>
            <template #suffix>
              <el-image
                style="
                  width: 130px;
                  height: 55px;
                  margin-right: -7px;
                  border-radius: 3px;
                  border: 1px solid #84a06e;
                "
                :src="url"
                @click.native="randomStr"
              ></el-image>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            style="background: #7181f0; color: #fff; width: 100%; height: 55px"
            @click="login"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import arr from './str'
export default {
  name: 'login-page',
  data() {
    return {
      form: {
        loginName: 'admin',
        password: 'admin',
        code: '',
        loginType: 0,
        clientToken: ''
      },
      rules: {
        password: [{ required: true, message: '请输入账号', trigger: 'blur' }],
        loginName: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        code: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
      },
      isHidden: false,
      url: ''
    }
  },
  methods: {
    // login
    async login() {
      this.$store.dispatch('user/login', this.form)
    },
    // 随机字符串
    randomStr() {
      let str = ''
      for (let i = 0; i < 33; i++) {
        const randomNum = Math.floor(Math.random() * 63)
        str += arr[randomNum]
      }
      this.url =
        'https://likede2-java.itheima.net/api/user-service/user/imageCode/' +
        str
      this.form.clientToken = str
      return str
    }
  },
  created() {
    this.randomStr()
  }
}
</script>

<style scoped lang="scss">
.login-box {
  background: url(http://likede2-admin.itheima.net/img/background.be4fae7d.png)
    no-repeat center center / cover;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: space-around;
  .box-card {
    position: relative;
    overflow: initial;
    width: 518px;
    .clearfix {
      position: absolute;
      top: -50px;
      right: 200px;
      box-shadow: 1px;
      border-radius: 50%;
    }
  }
}
.item-box {
  margin-top: 50px;
  .el-icon-mobile-phone {
    width: 20px;
    line-height: 55px;
  }
}
.el-icon-lock {
  width: 20px;
  line-height: 55px;
}
.el-icon-house {
  width: 20px;
  line-height: 55px;
}
.el-icon-view {
  width: 20px;
  line-height: 55px;
  color: #7181f0;
}
::v-deep .el-input__inner {
  height: 55px;
}
</style>
